<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-2.0.0.min.js"></script>
    <script>
        $(function(){
            //第一种
            // $("#btn").mouseenter(function(){
            //     $(this).css("backgroundColor","red");
            // });
            // $("#btn").mouseleave(function(){
            //     $(this).css("backgroundColor","green");
            // })
            // $("#btn").click(function(){
            //    alert("我被点了");
            // })

            
            //第二种:链式编程
            // $("#btn").mouseenter(function(){
            //     $(this).css("backgroundColor","red");
            // }).mouseleave(function(){
            //     $(this).css("backgroundColor","green");
            // }).click(function(){
            //    alert("我被点了");
            // })


            //第三种：事件绑定  bind
            // $("#btn").bind("mouseenter",function(){
            //     $(this).css("backgroundColor","red");
            // })
            // $("#btn").bind("mouseleave",function(){
            //     $(this).css("backgroundColor","green")
            // })
            // $("#btn").bind("click",function(){
            //     alert("我被点了");
            // })


            //第四种 bind链式编程
            $("#btn").bind("mouseenter",function(){
                $(this).css("backgroundColor","red");
            }).bind("mouseleave",function(){
                $(this).css("backgroundColor","green")
            }).bind("click",function(){
                alert("我被点了");
            })
            
        })
    
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    
</body>
</html>